<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    const observer = new PerformanceObserver((list) => {
      console.log(list.getEntries())
      for (const entry of list.getEntries()) {
      if (entry.entryType === 'largest-contentful-paint') {
          console.log('LCP:', entry.renderTime || entry.loadTime);
      }
      }
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</head>
<body>
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste vero illum, deserunt porro velit, architecto odio libero aut facilis veniam reprehenderit quibusdam praesentium hic, ut voluptatum natus ab nam id!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum debitis nobis nostrum facere, a vel voluptate nesciunt soluta earum voluptatem quibusdam quidem molestiae eum voluptas impedit, accusantium ab atque ratione.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum debitis nobis nostrum facere, a vel voluptate nesciunt soluta earum voluptatem quibusdam quidem molestiae eum voluptas impedit, accusantium ab atque ratione.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum debitis nobis nostrum facere, a vel voluptate nesciunt soluta earum voluptatem quibusdam quidem molestiae eum voluptas impedit, accusantium ab atque ratione.</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum debitis nobis nostrum facere, a vel voluptate nesciunt soluta earum voluptatem quibusdam quidem molestiae eum voluptas impedit, accusantium ab atque ratione.</div>
</body>
</html>